import './wdMenuModel.scss'
export default {
  install: (Vue, options) => {
    Vue.component('wdMenuModel', {
      render() {
        let submenu = null;
        const recurrence = (item,i) => {
          if (!item.children || item.children.length === 0) {
            submenu = (
            <el-menu-item index={item.url}>
              <i class={item.icon} />
              <span slot="title">{item.name}</span>
            </el-menu-item>
            )
          }
          if(item.children && item.children.length > 0) {
            const itemChildren = item.children.map(it => recurrence(it))
            submenu = (
              <el-submenu index={`${Date.now()}`}>
                <template slot="title">
                  <i class={item.icon} />
                  <span slot="title">{item.name}</span>
                </template>
                {itemChildren}
              </el-submenu>
            )
          }
          return submenu;
        }
        const menus = this.menus.map((item, i) => recurrence(item))
        return (
          <el-scrollbar style={`height:100%`} class="wdMenuModel">
            <el-menu
              default-active={this.$route.path}
              router
              collapse={this.isCollapse}
              class="wdMenuBox"
            >
              {menus}
            </el-menu>
          </el-scrollbar>
        )
      },
      props: {
        isCollapse: {
          type: Boolean,
          default: true
        },
        menus: {
          type: Array,
          default: [
            {
              name: '首页',
              url: '/',
              icon: 'el-icon-tickets'
            },
            {
              name: '地图',
              url: '/map',
              icon: 'el-icon-tickets'
            },
            {
              icon: 'el-icon-tickets',
              name: '导航一',
              children: [
                {
                  name: '测试',
                  url: '/test',
                  icon: 'el-icon-tickets'
                },
                {
                  icon: 'el-icon-tickets',
                  name: '导航一',
                  children: [
                    {
                      name: '测试',
                      url: '/test',
                      icon: 'el-icon-tickets'
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      data() {
        return {}
      }
    })
  }
}
